<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <!-- 文章详情的显示位置 -->
    <div class="container">
        <!-- 标题 -->
        <h1 class="title"></h1>
        <hr>
        <!-- 内容 -->
        <div class="content"></div>
        <!-- 评论 -->
        <ul class="comment"></ul>
    </div>
    <script>
        var container = document.querySelector('.container')
        var title = container.querySelector('.title')
        var content = container.querySelector('.content')
        var comment = container.querySelector('.comment')
        // 获取查询参数
        var id = location.search.slice(4)
        if (!id) {
            alert('参数错误')
            // 返回上一页
            history.back()
        } else {
            // console.log(id);
            // https://cnodejs.org/api/v1/topic/
            axios({
                url: ` https://cnodejs.org/api/v1/topic/${id}`
            }).then(res => {
                console.log(res.data);
                if (res.data.success) {
                    title.innerHTML = res.data.data.title
                    content.innerHTML = res.data.data.content
                    var html = ''
                    res.data.data.replies.forEach(item => {
                        html += `<li>
                            <div>评论内容: ${item.content}</div>
                            <div>作者: ${item.author.loginname}</div>
                            </li>
                        `
                    })
                    comment.innerHTML = html
                }
            })
        }


    </script>
</body>

</html>